<template>
  <div class="textbox">
    <div class="form-container">
      <h3>发布帖子</h3>
      <!-- 文本区域 -->
      <div class="form-box">
        <el-form :model="Invitationform" ref="InvitationRef" class="form">
          <el-form-item props="sname">
            <!-- 帖子板块选择 -->

            <!-- v-model="Invitationform.sid" -->
            <el-select
              class="plateOptions"
              v-model="Invitationform.sid"
              placeholder="请选择板块类别"
              clearable
            >
              <el-option
                id="optionSid"
                v-for="item in PlateOptions"
                :key="item.sid"
                :ref="item.sid"
                :label="item.sname"
                :value="item.sid"
              />
            </el-select>
          </el-form-item>

          <!-- 帖子标题 -->
          <el-form-item props="topic">
            <el-input
              class="title"
              type="text"
              placeholder="请输入标题"
              v-model="Invitationform.topic"
              maxlength="50"
              show-word-limit
              clearable
            >
            </el-input>
          </el-form-item>
          <Quill v-model="Invitationform.text"></Quill>
          <el-form-item class="avatar-box" prop="image1">
            <el-upload
              class="avatar-uploader"
              action="http://43.138.211.99:5656/getImgPath"
              :show-file-list="false"
              :auto-upload="true"
              :on-success="handle_success"
              v-model="Invitationform.image1"
              accept="image/png, image/jpg, image/jpeg"
            >
              <div @click="showImg">
                <img
                  v-if="this.Invitationform.image1"
                  :src="this.Invitationform.image1"
                  class="avatar"
                />
                <i v-else class="el-icon-upload avatar-uploader-icon"></i>
              </div>
              <div v-show="showChooseAvatar"></div> </el-upload
          ></el-form-item>
          <el-form-item class="btn">
            <el-button type="primary" @click="submit(Invitationform)"
              >发布帖子</el-button
            >
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>
<script>
import Quill from './Quill'
import { foren, getAllSection } from '@/api/services/article.services'
import { IsLogin } from '../../store/isLogin.js'
export default {
  name: 'editor',

  components: {
    Quill
  },

  data () {
    return {
      showChooseAvatar: true,
      PlateOptions: [],
      valueOne: [],
      imageUrl: '',
      Invitationform: {
        sid: '',
        topic: '',
        text: '',
        sname: '',
        image1: ''
      }
    }
  },
  created () {
    this.getInvitationList()
  },
  methods: {
    async getInvitationList () {
      const res = await getAllSection()
      res.forEach((item) => {
        this.PlateOptions.push(item)
      })
    },
    submit () {
      this.Invitationform.username = this.$store.state.user.username
      this.Invitationform.uid = this.$store.state.user.uid
      this.Invitationform.password = this.$store.state.user.password
      this.Invitationform.token = this.$store.state.token
      this.$refs.InvitationRef.validate(async (valid) => {
        if (!valid) return
        const data = await foren(this.Invitationform)
        console.log(this.Invitationform)
        if (data.status !== 200) { return this.$message.error('提交失败，请稍后重试！') }
        this.$router.push(`detail?sid=${data.sid}&pid=${data.pid}`)
        return this.$message.success('提交帖子成功！')
      })
    },
    handle_success (res) {
      console.log(res)
      this.$message.success('图片上传成功')
      this.Invitationform.image1 = res
      console.log(this.Invitationform.image1)
    },
    chooseImg (image1) {
      localStorage.setItem('avatar', image1)
      this.Invitationform.image1 = localStorage.getItem('avatar')
      this.showChooseAvatar = false
    },
    showImg () {
      this.showChooseAvatar = false
    }
  }
}
</script>

<style>
.form-container {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
h3 {
  position: relative;
  color: #333;
  text-align: center;
  border-bottom: 1px solid #e6e6e6;
  padding-bottom: 3px;
}
.plateOptions,
.title {
  width: 500px !important;
}
.form-box {
  height: 100%;
  width: 100%;
}
.form,
.btn {
  position: absolute;
  left: 50%;
  transform: translate(-50%);
}
.btn {
  position: absolute;
  top: 520px;
}
.avatar-box {
  width: 100px;
  height: 100px;
  box-sizing: border-box;
  position: relative;
  left: 540px;
  top: -220px;
}
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  cursor: pointer;
  position: relative;
  border-radius: 6px;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 100px;
  height: 100px;
  line-height: 100px;
  text-align: center;
}
.avatar {
  width: 100px;
  height: 100px;
  display: block;
}
</style>
